<!-- 消防隐患-详情 -->
<template>
	<view class="page">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block style="color: ##777777;font-size: 32rpx;" slot="content">隐患详情</block>
		</cu-custom>
		<view class="content" style="background-color: #fff;">
			<ul>
				<li v-if="dangerForm.abnormalPic">
					<text class="list-info">隐患图片：</text>
					<image :src="dangerForm.abnormalPic"></image>
				</li>
				<li>
					<text class="list-info">隐患名称：</text>
					<text class="list-title">{{dangerForm.name || '暂无'}}</text>
				</li>
				<li>
					<text class="list-info">执行时间：</text>
					<text class="list-title">{{dangerForm.executeTime | dateFormat}} </text>
				</li>
				<li>
					<text class="list-info">隐患描述：</text>
					<text class="list-title">{{dangerForm.remark || '暂无'}} </text>
				</li>
				<li>
					<text class="list-info">所属企业：</text>
					<text class="list-title">{{dangerForm.enterpriseName || '暂无'}} </text>
				</li>
				<li>
					<text class="list-info">所属区域：</text>
					<text class="list-title">{{dangerForm.regionName || '暂无'}} </text>
				</li>
				<li>
					<text class="list-info">隐患地点：</text>
					<text class="list-title">{{dangerForm.address || '暂无'}} </text>
				</li>
				<li v-if="dangerForm.reportPersonName">
					<text class="list-info">上报人：</text>
					<text class="list-title">{{dangerForm.reportPersonName || '暂无'}} </text>
				</li>
				<li v-if="dangerForm.reportPersonTel">
					<text class="list-info">上报人电话：</text>
					<text class="list-title">{{dangerForm.reportPersonTel || '暂无'}} </text>
				</li>
				<li v-if="dangerForm.reportTime">
					<text class="list-info">上报时间：</text>
					<text class="list-title">{{dangerForm.reportTime | dateFormat}} </text>
				</li>
				<li>
					<text class="list-info">当前状态：</text>
					<text class="list-title">{{dangerForm.statusStr || '暂无'}} </text>
				</li>
				<li>
					<text class="list-info">整改期限：</text>
					<text class="list-title">{{dangerForm.deadline | dateFormat}} </text>
				</li>
				<li v-if="dangerForm.status === 12">
					<text class="list-info">申请整改时间：</text>
					<text class="list-title">{{dangerForm.examineTime | dateFormat}} </text>
				</li>
			</ul>
			<view v-if="dangerForm.status===4">
				<view class="cu-bar bg-white margin-top my-flag">
					<view class="action">
						完成照片
					</view>
				</view>
				<view class="cu-form-group">
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage"
							:data-url="imgList[index]">
							<image :src="imgList[index]" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="flex btns-group">
			<button class="my-btn-grpup" v-if="dangerForm.status===1" @click="qrsdyh()">确认收到</button>
			<button class="my-btn-grpup" v-if="dangerForm.status===2" @click="kszg()">到场确认</button>
			<button class="my-btn-grpup" v-if="dangerForm.status===3" @click="xccz()">现场处置</button>
			<button class="my-btn-grpup" v-if="dangerForm.status===3" @click="fkzgsj()">反馈整改时间</button>
			<button class="my-btn-grpup" v-if="dangerForm.status===3" @click="misreport()">隐患误报</button>
			<button class="my-btn-grpup" v-if="dangerForm.status===3" @click="gdth()">工单退回</button>
			<button class="my-btn-grpup" v-if="dangerForm.status===4&&imgList.length>0" @click="comit()">提交</button>
		</view>

		<!-- 退回弹窗 -->
		<u-popup :show="backShow" closeOnClickOverlay @close="backShow = false">
			<u-form labelPosition="left" :model="model1" ref="form1">
				<u-form-item label="退回原因" prop="returnDescribe" borderBottom>
					<u-input v-model="model1.returnDescribe" placeholder="请输入退回原因"></u-input>
				</u-form-item>
			</u-form>
			<view class="flex btns-group">
				<button class="my-btn-grpup" @click="gdthSubmit()">确认</button>
				<button class="my-btn-grpup" @click="backShow=false">取消</button>
			</view>
		</u-popup>

		<!-- 隐患误报 -->
		<u-popup :show="misreportShow" closeOnClickOverlay @close="misreportShow = false">
			<u-form labelPosition="left" :model="model2" ref="form2">
				<u-form-item label="误报描述" borderBottom>
					<view class="cu-form-group">
						<view class="grid col-4 grid-square flex-sub">
							<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage"
								:data-url="imgList[index]">
								<image :src="imgList[index]" mode="aspectFill"></image>
								<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
									<text class='cuIcon-close'></text>
								</view>
							</view>
							<view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
								<text class='cuIcon-cameraadd'></text>
							</view>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="误报描述" prop="misreportDesc" borderBottom>
					<u-input v-model="model2.misreportDesc" placeholder="请输入误报描述"></u-input>
				</u-form-item>
			</u-form>
			<view class="flex btns-group">
				<button class="my-btn-grpup" @click="misreportSubmit()">确认</button>
				<button class="my-btn-grpup" @click="misreportShow=false">取消</button>
			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
		<message />
	</view>
</template>

<script>
	import * as constants from '@/common/config.js';
	export default {
		data() {
			return {
				dangerForm: {},
				ucId: '',
				imgList: [],
				backShow: false,
				model1: {
					ucId: null,
					returnDescribe: null
				},
				rules1: {
					returnDescribe: [{
						required: true,
						message: '请输入退回原因',
						trigger: ['change', 'blur'],
					}]
				},
				misreportShow: false,
				model2: {
					ucId: null,
					misreportUrl: null,
					misreportDesc: null
				},
				rules2: {
					misreportDesc: [{
						required: true,
						message: '请输入误报描述',
						trigger: ['change', 'blur'],
					}]
				}
			}
		},
		onLoad(option) {
			this.ucId = option.ucId
			this.xq()
		},
		methods: {
			xq() {
				let that = this
				let app = getApp()
				app.globalData.request({
					url: 'wx/inHiddenDanger/getInHiddenDanger',
					data: {
						"ucId": that.ucId
					}
				}).then(function(res) {
					that.dangerForm = res.data.data
				}).catch(function(e) {})
			},
			qrsdyh() {
				let that = this
				let app = getApp()
				app.globalData.request({
					url: 'wx/inHiddenDanger/determineHiddenDanger',
					data: {
						"ucId": that.ucId
					}
				}).then(function(res) {
					that.xq()
				}).catch(function(e) {})
			},
			kszg() {
				let that = this
				let app = getApp()
				app.globalData.request({
					url: 'wx/inHiddenDanger/startChangeStatus',
					data: {
						"ucId": that.ucId
					}
				}).then(function(res) {
					that.xq()
				}).catch(function(e) {})
			},
			xccz() {
				let that = this
				let app = getApp()
				app.globalData.request({
					url: 'wx/inHiddenDanger/directDisposal',
					data: {
						"ucId": that.ucId
					}
				}).then(function(res) {
					that.imgList = []
					that.xq()
				}).catch(function(e) {})

			},
			fkzgsj() {
				uni.navigateTo({
					url: '../fkzgsj/fkzgsj?ucId=' + this.ucId
				});
			},
			gdth() {
				this.model1.ucId = null
				this.model1.returnDescribe = null
				this.backShow = true
			},
			gdthSubmit() {
				this.$refs.form1.validate().then(res => {
					this.model1.ucId = this.ucId
					let that = this
					let app = getApp()
					app.globalData.request({
						url: 'wx/inHiddenDanger/backOff',
						data: this.model1
					}).then(function(res) {
						that.$refs.uToast.show({
							message: "隐患退回成功",
							type: 'success',
							complete() {
								uni.navigateBack({
									delta: 1
								})
							}
						})
					}).catch(function(e) {})
				}).catch(errors => {})
			},
			misreport() {
				this.model2.ucId = null
				this.model2.misreportDesc = null
				this.model2.misreportUrl = null
				this.imgList = []
				this.misreportShow = true
			},
			misreportSubmit() {
				if (this.imgList.length == 0) {
					that.$refs.uToast.show({
						message: "请上传照片",
						type: 'error'
					})
					return;
				}
				this.$refs.form2.validate().then(res => {
					let that = this
					let app = getApp()
					let token = app.globalData.getToken('authorization')
					console.log(111111)
					uni.uploadFile({
						url: constants.API + 'wx/common/upload',
						filePath: that.imgList[0],
						header: {
							"authorization": token
						},
						name: 'file',
						success: (uploadFileRes) => {
							that.model2.ucId = that.ucId
							that.model2.misreportUrl = JSON.parse(uploadFileRes.data).data
							app.globalData.request({
								url: 'wx/inHiddenDanger/mistake',
								data: that.model2
							}).then(function(res) {
								that.$refs.uToast.show({
									message: "上报成功",
									type: 'success',
									complete() {
										uni.navigateBack({
											delta: 1
										})
									}
								})
							}).catch(function(e) {})
						}
					})
				}).catch(errors => {})
			},
			comit() {
				if (this.imgList.length == 0) {
					uni.showToast({
						title: "请上传照片",
						icon: 'error'
					})
					return;
				}
				let that = this
				// 上传
				let app = getApp()
				let token = app.globalData.getToken('authorization')
				uni.uploadFile({
					url: constants.API + 'wx/common/upload',
					filePath: that.imgList[0],
					header: {
						"authorization": token
					},
					name: 'file',
					success: (uploadFileRes) => {
						let params = {
							"ucId": that.ucId,
							"completeUrl": JSON.parse(uploadFileRes.data).data
						}
						// 生成报警信息
						let app = getApp()
						app.globalData.request({
							url: 'wx/inHiddenDanger/pictureUpload',
							data: params
						}).then(function(res) {
							that.$refs.uToast.show({
								message: "提交成功",
								type: 'success',
								complete() {
									uni.navigateBack({
										delta: 1
									})
								}
							})
						}).catch(function(e) {})
					}
				});
			},
			ChooseImage() {
				if (this.imgList.length === 1) {
					uni.showToast({
						title: "只能上传一张图片",
						icon: 'error'
					})
					return
				}
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], //从相册选择
					success: (res) => {
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(res.tempFilePaths)
						} else {
							this.imgList = res.tempFilePaths
						}
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '删除照片',
					content: '确定要删除删除照片？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			}
		},
		onReady() {
			this.$refs.form1.setRules(this.rules1);
			this.$refs.form2.setRules(this.rules2);
		}
	}
</script>

<style scoped>
	page {
		width: 100vw;
		position: relative;
	}

	.content {
		margin-top: 24rpx;
		margin-bottom: 66px;
		background-color: #FFFFFF;
		font-size: 18px;
	}

	.action {
		margin-bottom: 5px;
	}

	.text-orange {
		margin: 5px;
	}

	li {
		margin-left: 24rpx;
		margin-right: 24rpx;
		position: relative;
	}

	ul li:first-child {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: flex-start;
		position: relative;
		align-items: center;
		padding: 25rpx 0;
	}

	li image {
		display: block;
		width: 180px;
		height: 180px;
		margin-right: 20px;
	}

	li text {
		font-size: 24rpx;
		letter-spacing: 0.39px;
		line-height: 94rpx;
	}

	li::after {
		content: ''; // 必须
		position: absolute;
		left: 2rpx;
		bottom: 0;
		right: 2rpx;
		height: 1px;
		background-color: #dcdcdc;
	}
</style>
